/* eslint-disable react/no-array-index-key */
/**
 * 问题-回答详情
 */
import React from 'react';
import { Divider, List, Card } from 'antd';
import { Split } from '@/molecules';
import { getParse } from '@/pages/Recruitment/utils.js';
import { DetailItem, Audio, CommentItem } from '../../components';

export default function QuestionDetail({ data, audioUrl, completeTimeJson }) {
    if (!data || !data.length) {
        return null;
    }
    return (
        <Split type="vertical" space>
            {data.map((item, index) => {
                const { id, question, answer, comments } = item;

                const { answerContent, recordTimeInfo } = answer;

                const records = JSON.parse(recordTimeInfo || null) || [];
                const completeTimeArrange = JSON.parse(completeTimeJson || null) || {};

                return (
                    <Card key={id}>
                        <DetailItem contentStyle={{ fontWeight: 500, fontSize: 16 }}>{`${index +
                            1}.${question}`}</DetailItem>
                        <DetailItem label="试用员工答复">{answerContent}</DetailItem>
                        {!!(audioUrl && completeTimeJson && records.length) && (
                            <DetailItem label="答复录音">
                                <Split space>
                                    {records.map(record => (
                                        <Audio
                                            url={audioUrl}
                                            time={getParse(
                                                completeTimeArrange.startTime,
                                                completeTimeArrange.endTime,
                                                record.startTime,
                                                record.endTime
                                            )}
                                        ></Audio>
                                    ))}
                                </Split>
                            </DetailItem>
                        )}
                        <Divider style={{ margin: '12px 0 ' }} />
                        <DetailItem label="面谈评估" />
                        <List split={false}>
                            {comments.map((comment, cIndex) => {
                                const { commentContent, commentEmployeeName, employeeAvatar } = comment;
                                return (
                                    <List.Item key={cIndex}>
                                        <CommentItem
                                            avatar={employeeAvatar}
                                            name={commentEmployeeName}
                                            comment={commentContent}
                                        />
                                    </List.Item>
                                );
                            })}
                        </List>
                    </Card>
                );
            })}
        </Split>
    );
}
